<template>
  <div class="app-container">
    <!-- 数据表 -->
    <div class="w-[100%] overflow-auto">
      <div class="min-w-screen-md">
        <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents" />
      </div>
    </div>

    <!-- 额外组件 -->
    <AddModule
      ref="addRef"
      :api="API"
      mode="add"
      :options="selectOption"
      @reload="gridRef?.commitProxy('query')"
    />

    <UpdateModule
      ref="updateRef"
      :api="API"
      mode="update"
      :options="selectOption"
      @reload="gridRef?.commitProxy('query')"
    />

    <DetailModule ref="detailRef" :api="API" :options="selectOption" />
  </div>
</template>

<script setup>
import API from '@/api/admin/dev/prop';
import FieldAPI from '@/api/admin/dev/field';
import { useTable } from './useTable';

import AddModule from './update.vue';
import UpdateModule from './update.vue';
import DetailModule from './detail.vue';

// 自定义配置
const customConfig = {
  // 可以在这里添加自定义配置覆盖默认配置
  checkboxConfig: {
    trigger: 'row',
  },
  pagerConfig: {
    pageSize: 20,
  },
};

// 表格引用、配置、及初始化函数
const tableId = 'DevProp';
const {
  // 组件引用
  gridRef,
  addRef,
  updateRef,
  detailRef,
  // SQL选项
  selectOption,
  // 数据表配置
  gridOptions,
  gridEvents,
  initTable,
} = useTable({ API, FieldAPI, tableId, customConfig });

// 页面加载时执行
onMounted(async () => {
  await initTable();
});

// 组件选项
defineOptions({
  name: tableId,
  inheritAttrs: false,
});
</script>
